<template>
	<public-view :isTabbar="true">
		<view class="content">
			<view class="swiper-box">
				<my-swiper :list="swiper_list"></my-swiper>
			</view>
			<view class="nav-tab-box flex f-w-w j-c-b">
				<block v-for="(item, index) in nav_list" :key="index">
					<view class="item flex f-d-c a-i-c f-s-22 color-333" @click="item.type==='switch'?goSwitch({url:item.url,current:3}):goTo({url:item.url})">
						<image class="icon" :src="item.icon" mode=""></image>
						{{item.title|| ""}}
					</view>
				</block>
			</view>
			<view class="shop-car-icon flex a-i-c j-c-b color-333">
				<view class="f-s-30 ">
					热门推荐
				</view>
				<view class="flex a-i-c refresh f-s-24" @click="page=1,getHotCar()">
					刷新
					<image class="icon" src="@/static/images/index/refresh-icon.svg" mode=""></image>
				</view>
			</view>
			<view class="shop-list-box flex j-c-b f-w-w">
				<block v-for="(item, index) in hot_car_list" :key="index">
					<goods-box :item="item"></goods-box>
				</block>
			</view>
		</view>
	</public-view>
</template>

<script>
	import goodsBox from "@/components/myComponents/goodsBox.vue"
import mySwiper from "@/components/myComponents/swiper.vue"
import { goSwitch, goTo } from "@/nav.js"
import { mapGetters } from "vuex"
	// let app = getApp()
	export default {
		components:{
			"my-swiper":mySwiper,
			"goods-box":goodsBox
		},
		data() {
			return {
				swiper_list:[],
				nav_list:[
					{
						title:"保滴选车",
						icon:"/static/images/index/baodixuanche.svg",
						url:"/pages/findCarSearch/index"
					},
					{
						title:"二手车",
						icon:"/static/images/index/ershouche.svg",
						url:"/pages/secondCar/index"
					},
					{
						title:"配件商城",
						icon:"/static/images/index/peijianshangcheng.svg",
						url:"/pages/shop/index"
					},
					{
						title:"找货/找车",
						icon:"/static/images/index/zhaoche.svg",
						url:"/pages/findCar/index",
						// type:"switch"
					},
					{
						title:"车辆救援",
						icon:"/static/images/index/cljy.svg",
						url:"/pages/rescue/index?title=救援公司"
					},
					{
						title:"修理保养",
						icon:"/static/images/index/byxl.svg",
						url:"/pages/repair/index?title=修理厂"
					},
					{
						title:"加油站",
						icon:"/static/images/index/jiayou.svg",
						url:'/pages/gasStation/index'
					},
					{
						title:"司机招聘",
						icon:"/static/images/index/zhaopin.svg",
						url:"/pages/findWork/index"
					}
				],
				page:1,
				hot_car_list:[]
			}
		},
		computed:{
			...mapGetters(["tabCurrent"])
		},
		onLoad() {
		},
		onShow() {
			this.getBunnerList()
			this.getHotCar()
			// this.paya()
		},
		onReachBottom() {
			this.page++
			this.getHotCar()
		},
		methods: {
			goTo,goSwitch,
			paya(){
				let that = this
				that.util.getRequest({
					url:"v1/order/pay",
				}).then(res=>{
					console.log(res)
					uni.requestPayment({
						provider:"alipay",
						orderInfo:res.data
					}).then(res=>{
						console.log(res)
					})
				})
			},
			getHotCar(){
				//热门车辆
				let that = this
				that.util.getRequest({
					url:"v1/index/hot",
					data:{
						rows:10,
						page:that.page
					}
				}).then(res=>{
					if(that.page === 1){
						that.hot_car_list = res.data.data
					}else{
						if(res.data.data.length>0){
							that.hot_car_list = that.hot_car_list.concat(res.data.data)
						}else{
							that.page--
						}
					}
				})
			},
			getBunnerList(){
				//轮播图
				let that = this
				that.util.getRequest({
					url:"v1/public_/getBanner",
					data:{
						type:0
					}
				}).then(res=>{
					that.swiper_list = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shop-list-box{
		width: 694upx;
		padding-top: 24upx;
	}
	.shop-car-icon{
		width: 694upx;
		.refresh{
			.icon{
				width: 28upx;
				height: 28upx;
				margin-left: 4upx;
			}
		}
	}
	.nav-tab-box{
		width: 694upx;
		background: #FFFFFF;
		box-shadow: 0px 0px 28upx rgba(0, 0, 0, 0.06);
		padding: 48upx 0;
		border-radius: 24upx;
		margin-bottom: 28upx;
		.item{
			width: calc(100% / 4);
			margin-bottom: 24upx;
			.icon{
				width: 80upx;
				height: 80upx;
				margin-bottom: 8upx;
			}
		}
	}
	.swiper-box{
		margin-top: 16upx;
		margin-bottom: 20upx;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
